<template>
  <view class="recharge-page">
    <view class="recharge-head">
      <up-tabs :list="list1" lineColor="linear-gradient(90deg, #A4682F 0%, transparent 100%)" lineHeight="16rpx"
        lineWidth="64rpx" :activeStyle="{
      color: '#333333', 
      fontWeight: '500',
      fontSize:'32rpx'}" :inactiveStyle="{
       color: '#666666',
       fontWeight: '400',
       fontSize:'28rpx'}" @click="clickTab"></up-tabs>
      <view class="head-time">
        <view class="head-date" @click="dateShow = true">
          {{dateTitle}}
          <up-icon name="arrow-down-fill" color="#DCDEE0" size="16rpx"></up-icon>
        </view>
        <view class="head-price">{{tabActive ===1 ?'收入':'支出'}}￥{{tabActive ===1 ?incomePrice:expendPrice}}</view>
      </view>
    </view>
    <view class="recharge-content">
      <mescroll-uni @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback" :fixed="false">
        <view class="recharge-nav" v-for="item,index in orderList" @click="onRecord">
          <image :src="item.pay_logo" mode="" class="nav-icon"></image>
          <view class="nav-box">
            <view class="">{{item.memo}}</view>
            <view class="">{{item.created_time}}</view>
          </view>
          <view class="nav-price">{{item.type == 1? '+':'-'}}{{item.price}}</view>
        </view>
      </mescroll-uni>
    </view>
  </view>
  <up-datetime-picker title="选择年月" :show="dateShow" v-model="dateValue" mode="year-month" :formatter="formatter"
    confirmColor="#A4682F" @cancel="dateShow = false" @confirm="onConfirm"></up-datetime-picker>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue';
  import {
    coinsLog
  } from '../api.js'
  import {
    onLoad,
    onShow,
    onPageScroll,
    onReachBottom
  } from '@dcloudio/uni-app'
  import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
  import dayjs from 'dayjs';
  const dateShow = ref(false);
  const dateValue = ref(Date.now());
  const dateTitle = ref('')
  const isExpert = ref(false)
  const tabActive = ref(1)
  const month = ref('')
  const year = ref('')
  const orderList = ref([])
  const expendPrice = ref(0)
  const incomePrice = ref(0)
  const list1 = reactive([{
      name: '收入',
      type: 1
    },
    {
      name: '支出',
      type: 2
    }
  ]);
  const upOption = ref({
    empty: {
      tip: '~ 暂无记录 ~'
    }
  })
  const {
    mescrollInit,
    downCallback,
    getMescroll
  } = useMescroll(onPageScroll, onReachBottom)

  function clickTab(val) {
    tabActive.value = val.type
    orderList.value = []
    downCallback()
  }

  function onConfirm(val) {
    const formattedDate = dayjs(val.value).format('YYYY年MM月');
    month.value = dayjs(val.value).month() + 1;
    year.value = dayjs(val.value).year();
    dateTitle.value = formattedDate
    dateShow.value = false
    downCallback()
  }
  onLoad(() => {
    const formattedDate = dayjs(dateValue.value).format('YYYY年MM月');
    month.value = dayjs(dateValue.value).month() + 1;
    year.value = dayjs(dateValue.value).year();
    dateTitle.value = formattedDate
    isExpert.value = uni.getStorageSync('user').is_expert === 1 ? true : false
  })

  function onRecord() {
    // uni.navigateTo({
    //   url: '/pages/my/walletPage/detailedRecords'
    // })
  }

  const formatter = (type, value) => {
    if (type === 'year') {
      return `${value}年`;
    }
    if (type === 'month') {
      return `${value}月`;
    }
    return value;
  };
  const upCallback = (mescroll) => {
    coinsLog({
      page: mescroll.num,
      year: year.value,
      month: month.value,
      type: tabActive.value
    }).then(res => {
      const curPageData = res.data.data || [] // 当前页数据
      const totalPage = res.data.total
      expendPrice.value = res.data.total_expend_price
      incomePrice.value = res.data.total_income_price
      if (mescroll.num == 1) orderList.value = []; // 第一页需手动制空列表      
      orderList.value = orderList.value.concat(curPageData); //追加新数据
      mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
      mescroll.endSuccess(curPageData.length)
    }).catch(() => {
      mescroll.endErr()
    })
  }
</script>

<style lang="scss" scoped>
  .recharge-page {
    height: 100%;
    display: flex;
    flex-direction: column;

    .recharge-head {
      width: 100%;
      background: #FFFFFF;
      display: flex;
      box-sizing: border-box;
      padding: 0 30rpx;
      flex-direction: column;

      ::v-deep .u-tabs__wrapper__nav__line {
        border-radius: 0;
        bottom: 16rpx;
      }

      ::v-deep .u-tabs__wrapper__nav__item {
        padding: 0 24rpx;
        flex: 1;
        z-index: 1;
      }

      .head-time {
        height: 96rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .head-date {
        font-size: 30rpx;
        font-weight: 400;
        color: rgba(50, 50, 51, 1);
        display: flex;
        align-items: center;
      }

      .head-price {
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);

      }
    }

    .recharge-content {
      flex: 1;
      box-sizing: border-box;
      padding: 30rpx;
      overflow: scroll;
      width: 100%;
      border-radius: 16rpx;

      .recharge-nav {
        width: 100%;
        height: 140rpx;
        display: flex;
        align-items: center;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 30rpx;

        .nav-icon {
          height: 80rpx;
          width: 80rpx;
        }

        .nav-box {
          flex: 1;
          margin-left: 24rpx;
          display: flex;
          flex-direction: column;
          font-weight: 400;

          :first-child {
            font-size: 30rpx;
            color: rgba(51, 51, 51, 1);

          }

          :last-child {
            font-size: 24rpx;
            color: rgba(153, 153, 153, 1);
            margin-top: 4rpx;
          }
        }

        .nav-price {
          font-size: 36rpx;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);

        }
      }
    }
  }
</style>